<template>
	<view class="kaiPiao">
		<view class="title">
			选择发票
		</view>
		
		<view class="tabCheck">
			<span @click="form.invoiceComType = 0" :class="form.invoiceComType == 0?'active':''">个人 <i class="line"></i> </span>
			<span @click="form.invoiceComType = 1" :class="form.invoiceComType == 1?'active':''">公司 <i class="line"></i></span>
		</view>
		<form  >
			<view class='addAddress pad30' v-if="form.invoiceComType == 0">
				<view class='list borRadius14'>
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>发票抬头</view>
						<input type='text' v-model="form.invoiceTitle" placeholder='请输入发票抬头' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</view>
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>发票内容</view>
						<input type='text' v-model="form.invoiceContent"  placeholder='请输入发票内容' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</view>
				</view>
			</view>
			
			<view class='addAddress pad30' v-if="form.invoiceComType == 1">
				<view class='list borRadius14'>
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>发票抬头</view>
						<input type='text' v-model="form.invoiceTitle" placeholder='请输入发票抬头' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</view>
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>发票内容</view>
						<input type='text'  v-model="form.invoiceContent"  placeholder='请输入发票内容' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</view>
					
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>发票类型</view>
						
						<view class="checkfapiao">
							<span @click="form.invoiceType = 0" :class="form.invoiceType == 0?'active':''">普通发票</span>
							<span @click="form.invoiceType = 1" :class="form.invoiceType == 1?'active':''">增值税发票</span>
						</view>
					</view>
					
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>公司税号</view>
						<input type='text' v-model="form.taxNum" placeholder='请输入公司税号' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</view>
					
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>开户银行</view>
						<input type='text'  v-model="form.bankName" placeholder='选填' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</view>
					
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>银行账号</view>
						<input type='text' v-model="form.bankAccount" placeholder='选填' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</view>
					
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>企业地址</view>
						<input type='text'  v-model="form.companyAddress" placeholder='选填' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</view>
					
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>企业电话</view>
						<input type='text' v-model="form.companyPhone" placeholder='选填' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</view>
				</view>
			</view>
		</form>
		
		<view class="btns">
			<view class="save" @click="save">
				保存
			</view>
			<view class="save" style="background-color: #ccc;" @click="noKaipiao">
				暂不开票
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			shareInfoStatus: {
				type: Boolean,
				default: false,
			}
		},
		data: function() {
			return {
				kaipiaoIndex:0,
				
				form:{
					invoiceComType:0,
					invoiceType:0,
					invoiceTitle:'',
					invoiceContent:'',
					taxNum:'',
					bankName:'',
					bankAccount:'',
					companyAddress:'',
					companyPhone:''
				}
			};
		},
		mounted: function() {},
		methods: {
			noKaipiao(){
				
				let data = {
					invoiceComType:0,
					invoiceType:0,
					invoiceTitle:'',
					invoiceContent:'',
					taxNum:'',
					bankName:'',
					bankAccount:'',
					companyAddress:'',
					companyPhone:''
				}
				this.$emit('noKaipiao',data)
			},
			save(){
				
				if(this.invoiceComType == 1){
					if(this.form.taxNum == ''){
						return this.$Show.show('请输入公司税号')
					}
				}
				
				
				if(this.form.invoiceTitle == ''){
					return this.$Show.show('请输入发票抬头')
				}
				
				if(this.form.invoiceContent == ''){
					return this.$Show.show('请输入发票内容')
				}
				
				
				
				
				this.$emit('saveKaipiao',this.form)
			}
		}
	};
</script>

<style scoped lang="scss">
	
	.checkfapiao{
		width: 480rpx;
		span{
			margin-left: 40rpx;
		}
		.active{
			color: #ec4747;
		}
	}
	.btns{
		.save{
			width: 669rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ec4747;
			color: #fff;
			border-radius: 50px;
			margin: 30rpx auto;
		}
	}
	.tabCheck{
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		span{
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.line{
				width: 150rpx;
				height: 2px;
				background-color: red;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				opacity: 0;
			}
		}
		.active{
			.line{
				opacity: 1;
			}
		}
	}
	.kaiPiao{
		background-color: #fff;
		padding: 20rpx;
		.title{
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 32rpx;
		}
	}
	
	.addAddress {
		padding-top: 20rpx;
	}
	.addAddress .list {
		background-color: #f8f8f8;
		padding: 0 24rpx;
	}
	
	.addAddress .list .item {
		border-top: 1rpx solid #eee;
		height: 90rpx;
		line-height: 90rpx;
	}
	
	.addAddress .list .item .name {
		// width: 195rpx;
		font-size: 30rpx;
		color: #333;
	}
	
	.addAddress .list .item .address {
		flex: 1;
		margin-left: 50rpx;
	}
	
	.addAddress .list .item input {
		width: 475rpx;
		font-size: 30rpx;
		font-weight: 400;
	}
	
	.addAddress .list .item .placeholder {
		color: #ccc;
	}
	
	.addAddress .list .item picker .picker {
		width: 410rpx;
		font-size: 30rpx;
	}
	
	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}
	
	.addAddress .default checkbox {
		margin-right: 15rpx;
	}
	
	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 80rpx auto 24rpx auto;
		font-size: 32rpx;
		color: #fff;
	}
	
</style>